<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css">
        .updata-list{position:relative;padding:0.75rem 0.6rem 0.65rem;line-height:1;}
        .updata-title{position:relative;display:block;width:6.85rem;font-size:0.7rem;color:#666;margin-bottom:0.2rem;}
        .updataImg{display:inline-block;position:relative;width:4rem;border:1px solid #ccc;margin-right:1rem;margin-bottom: 1rem;padding: 0.5rem}
        .joinImg{width:100%}
        .file-Img{opacity:0;position:absolute;top:0;left:0;bottom:0;right:0;z-index:9;background:red;width:100%;}
        .input-close{position:absolute;top:-11px;left:-13px;width:1.5rem;z-index: 12}
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
    <div class="updata-list">
        <div class="updataImg" data-index=0 id="updataImg">
            <img class="input-close" src="close.png">
            <input type="file" name="" class="file-Img" id="file-input" accept="image/*">
            <img class="joinImg" id="file-img" src="add.png" data-filename onerror="this.src='add.png';"/>
        </div>
    </div>
    <script type="text/javascript" src="hammer.min.js"></script>
    <script type="text/javascript">
        $(document).on("click","#file-input",function(e){
            if($(this).val() != ""){
                return false;
            }
        })

        $(document).on("change","#file-input",function(e){
            console.log(e);
            for (var i = 1; i <= $(".updataImg").length; i++) {
                var html = "";
                html += "<div class='updataImg' data-index="+i+">";
                html += "<img class='input-close' src='close.png'>";
                html += "<input type='file' name='' class='file-Img' id='file-input'>";
                html += "<img class='joinImg' id='file-img' src='add.png' data-filename/>";
                html += "</div>";
            }
            
            $(html).appendTo(".updata-list")
             
        })
        $(document).on("click",".input-close",function(e){
            console.log($(this))
            if ($(".updataImg").length == 1) {
                return false
            }else{
                $(this).parent().remove()
            }
            
        })
        var hammer = new Hammer(document.getElementById("updataImg"))
        hammer.ondragstart = function(ev) { };
        hammer.ondrag = function(ev) { };
        hammer.ondragend = function(ev) { }; 
    </script>
</body>
</html>